<template>
  <div class="gift" v-web-min-width>
    <el-carousel :interval="4000" type="card" height="200px" class="carousel-color">
    <el-carousel-item v-for="img in topImgs" :key="img">
      <div :class="{'top-one':img===1,'top-two':img===2,'top-three':img===3}" class="img-wrapper"></div>
    </el-carousel-item>
  </el-carousel>
    <div class="content-wrapper">
          <div class="img">
             <span class="icon">
              <span class="line"></span>
            </span>
          </div>
    </div>
    <div class="hotlist">
      <div class="list-title">
        <a  href="http://www.baidu.com">热门商品</a>
      </div>
      <div class="list-content">
        <div class="list-item" v-for="item in goodsList">
          <div class="list-img">
            <img :src="item.imgurl" >
            <!--<a :href="www.baidu.com" class="button">查看详情</a>-->
            <!--  <img v-lazy="item.imgurl">-->
          </div>
          <div class="list-info">
            <p class="list-name">{{item.goodsname}}</p>
            <p class="list-integral">{{item.integral}}</p>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script type="text/ecmascript-6">
  export default {
    name: 'index',
    components: {
    },
    data () {
      return {
        topImgs: [1, 2, 3],
        goodsList: [
          {'imgurl': 'http://p.qpic.cn/music_cover/RrXobiciaW7sU0htwoU8XrKCeJN4wbl4oXqgiaibreRUbuYyibD6ibsnI1AA/300?n=1',
            'goodsname': '大白兔',
            'integral': '3000积分'},
          {'imgurl': 'http://p.qpic.cn/music_cover/fqHUqZibOfMrpDDNYkevRSrQa99SEDtw5XSywXWsV2AEzI7cOlQ7tCg/300?n=1',
            'goodsname': '一点绿',
            'integral': '2000积分'},
          {'imgurl': 'http://p.qpic.cn/music_cover/6XFhg7ldObzBw37HAkL9LjB2hmGNE6iaibgjdqRrcXJuohnQ3icdpAZBA/300?n=1',
            'goodsname': '龙龙',
            'integral': '2500积分'},
          {'imgurl': 'http://p.qpic.cn/music_cover/nFEeTlC0NpakOMniakpfc5nnEB1qyBbGrjXZ2z7DxZeibYPJpxpovFIA/300?n=1',
            'goodsname': '泰龙先生',
            'integral': '2500积分'},
          {'imgurl': 'http://p.qpic.cn/music_cover/RrXobiciaW7sU0htwoU8XrKCeJN4wbl4oXqgiaibreRUbuYyibD6ibsnI1AA/300?n=1',
            'goodsname': '大白兔',
            'integral': '3000积分'},
          {'imgurl': 'http://p.qpic.cn/music_cover/fqHUqZibOfMrpDDNYkevRSrQa99SEDtw5XSywXWsV2AEzI7cOlQ7tCg/300?n=1',
            'goodsname': '一点绿',
            'integral': '2000积分'},
          {'imgurl': 'http://p.qpic.cn/music_cover/6XFhg7ldObzBw37HAkL9LjB2hmGNE6iaibgjdqRrcXJuohnQ3icdpAZBA/300?n=1',
            'goodsname': '龙龙',
            'integral': '2500积分'},
          {'imgurl': 'http://p.qpic.cn/music_cover/nFEeTlC0NpakOMniakpfc5nnEB1qyBbGrjXZ2z7DxZeibYPJpxpovFIA/300?n=1',
            'goodsname': '泰龙先生',
            'integral': '2500积分'}
        ],
        items: [1, 2, 3, 4, 5]
      }
    },
    methods: {
      test (param) {
        console.log(param)
        this.msg = 'hello'
      }
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  @import "Gift.styl";
</style>

